<template>
  <pages>
    <pages-header slot="header" :back="back">{{msg}}</pages-header>
    <div class="hello">
      {{count}}
    </div>
    <be-slide
      :loop="true"
      :index="slideIndex"
      @des-touch="slideTouch"
      @des-player="slidePlayer"
      ref="slide"
    >
      <be-slide-item v-for="i in 5" v-tap="slideTap(i)" :key="i">{{i}}</be-slide-item>
    </be-slide>
  </pages>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      p: {
        a: 1
      },
      b: this.e,
      d: [1,2,3],
      count: 0,
      slideIndex: 0
    }
  },
  computed:{
    back() {
      if(this.$route.meta.type)
        return {
          template: '<i class="iconfont icon-return"></i>',
          tap: this._back
        }
      return false
    },
  },
  methods: {
    slideTouch(e) {
      this.slideIndex = e.index
    },
    slidePlayer(e) {
      this.slideIndex = e.index
    },
    slideTap(url) {
      return (e) => {
        console.log(url)
      }
    }
  },
  cache() {
    this.count += 1
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
}
a {
  color: #42b983;
}
</style>
